<template>
    <div>
  <el-row> 
  <el-col :span="20">
    <el-card :body-style="{ padding: '0px' ,cursor: 'pointer',width:'100%',height:'100%'}">
       <el-image :src="greenLand.greenLandPhotos[0].photoUrl"
        fit="fill" @click="showDetails()">
            <div slot="error" >
                <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                    加载失败
                </div>
            </div>
      </el-image>
      <div style="padding: 14px;">
        <span style="font-size:16px;cursor: pointer;" @click="showDetails()">{{greenLand.name}}</span>
        <div class="bottom clearfix">
          <div class="bottom-left">
              <el-tag size="small"> 受灾面积:{{greenLand.sufferInjuries[0].area}}</el-tag>
           <br>
           <el-tag size="small">植物健康程度:{{greenLand.sufferInjuries[0].healthy}}</el-tag>
            
          </div> 
          <el-button type="success" class="button" icon="el-icon-check" @click="setWaring()">消除警报</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
 <Details ref="details"  @OK="findAll"></Details>
    </div>
</template>

<script>
import { AxiosGet,AxiosPost } from '../../axios';
import Details from '../GreenLand/Details.vue'
export default {
    name: 'Message',
    props:['greenLand'],
    data() {
        return {
              currentDate: new Date()
        };
    },
    components:{Details},
    mounted() {
        
    },

    methods: {
         showDetails(){
            this.$refs.details.greenLand= this.greenLand
            this.$refs.details.show()
        },
        findAll(){
            AxiosGet('greenLand/findAll','').then(sucess=>{
            this.$ls.set('greenLandList',sucess.data,30*60*1000)
            }).catch(error=>{
                console.log(error);
        })},
        setWaring(){
            this.greenLand.waringGrade =4
            AxiosPost('greenLand/updateWeb',this.greenLand).then(sucess=>{
                if(sucess.status==200){
                    this.$notify({title: 'sucess',message:"消除警报成功",type: 'success'});
                   this.$emit("OK",sucess)
                }
                
                this.dialogVisible=false
            })
            
        }
    },
};
</script>

<style scoped>
.bottom-left{
    width: 100%;
}
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .button {
    float: right;
  }

  .image {
    width: 100%;
    height: 200px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>